<template>
  <div class="star-wrapper">
    <div class="star-group" v-for="(star, index) in starsShow" :key="index">
      <span class="iconfont" v-if="star==1">&#xe7d2;</span>
      <span class="iconfont" v-else>&#xe814;</span>
    </div>
    <div class="star-average">{{this.starsRating.average}}</div>
  </div>
</template>

<script>
export default {
  name: 'Stars',
  props: {
    starsRating: Object
  },
  data () {
    return {
      starsShow: []
    }
  },
  methods: {
    getStarsArr (rating) {
      rating = rating.substring(0, 1)
      for (let i = 0; i < 5; i++) {
        this.starsShow.push((i < rating) ? 1 : 0)
      }
    }
  },
  mounted () {
    this.getStarsArr(this.starsRating.stars)
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variable'
  .star-wrapper
    margin-bottom: .1rem
    display: flex
    align-items: center
    .star-group
      flex: 1
      color: $color-text
    .star-average
      font-size: .3rem
      margin-left: .2rem
</style>
